import React, { Component } from "react";
// 导入样式
import "./cursor.css";

class Mouse extends Component {
  // 定义响应数据
  state = {
    x: 0,
    y: 0,
  };

  componentDidMount() {
    // 注册鼠标移动事件=》获取鼠标移动后在页面的坐标点
    window.addEventListener("mousemove", this.handlerMove);
  }

  handlerMove = (e) => {
    // console.log(e);
    this.setState({
      x: e.x,
      y: e.y,
    });
  };

  componentWillUnmount() {
    // 解绑事件
    window.removeEventListener("mousemove", this.handlerMove);
  }

  render() {
    return (
      <center>
        <h1>
          鼠标位置：{this.state.x}:{this.state.y}
        </h1>
      </center>
    );
  }
}

export default Mouse;
